<!-- 双向转诊订单 -->
<template>
  <div class="doctorreviewlist">
    <Row>
      <Col :xs="24">
        <div class="margin-up-down">
          <span>申请编号:</span>
          <Input class="w-input" v-model="filterObj.applyCode" placeholder="请输入申请编号" style='width:150px;'/>
        </div>
        <div class="margin-up-down">
          <span>患者姓名:</span>
          <Input class="w-input" v-model="filterObj.memberName" placeholder="请输入患者姓名" style='width:130px;'/>
        </div>
        <div class="margin-up-down">
          <span>申请机构:</span>
          <Input class="w-input" v-model="filterObj.applyHospitalName" placeholder="请输入申请机构名称" style='width:150px;'/>
        </div>
        <div class="margin-up-down">
          <span>申请医生:</span>
          <Input class="w-input" v-model="filterObj.applyDoctorName" placeholder="请输入申请医生" style='width:150px;'/>
        </div>
        <div class="margin-up-down">
          <span>转诊类型:</span>
          <Select class="w-select" clearable v-model="filterObj.receiveType" :key="filterObj" style='width:100px;'>
            <Option :value="0" style='text-align:center'>门诊</Option>
            <Option :value="1" style='text-align:center'>住院</Option>
          </Select>
        </div>
      </Col>
      <Col :xs="24">
        <div class="margin-up-down">
          <span>申请日期:</span>
          <DatePicker type="date" :clearable="false" @on-change="changeStart" v-model="startDate" placeholder="开始日期" format="yyyy-MM-dd" style="width: 165px"></DatePicker>
          <span>至</span>
          <DatePicker type="date" :clearable="false" @on-change="changeEnd" v-model="endDate" placeholder="结束日期" format="yyyy-MM-dd" style="width: 165px"></DatePicker>
        </div>
        <div class="margin-up-down">
          <span>接诊医院:</span>
          <Input class="w-input" v-model="filterObj.expectHospitalName" placeholder="请输入接诊医院" style='width:150px;'/>
        </div>
        <div class="margin-up-down">
          <span>转诊状态:</span>
          <Select class="w-select" clearable v-model="filterObj.tranStatus" :key="filterObj" style='width:150px;'>
            <Option v-for="item in zhuangtai" :key="item.dictValue" :value="item.dictValue" style='text-align:center'>{{ item.dictName }}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <span>转诊方向:</span>
          <Select class="w-select" clearable v-model="filterObj.tranType" style='width:100px;'>
            <Option :value="0" style='text-align:center'>向上转诊</Option>
            <Option :value="1" style='text-align:center'>向下转诊</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <Button type="primary" @click="loadsrach()">
            <Icon size="14"/>查询
          </Button>
          <Button @click="loadnodePage()">
            <Icon size="14"/>重置
          </Button>
        </div>
      </Col>
    </Row>
    <Table class="m-table" stripe :columns="columns" :data="orderList"></Table>
    <Page :total="count" :current="filterObj.pageNo" :page-size="filterObj.pageSize" @on-change="loadPage"/>
  </div>
</template>
<script>
import { DatePicker } from "view-design";
import api from "@/api/commonApi";
import Utils from "@/utils";
const filterObj = {
  applyCode: null,
  memberName: null,
  applyHospitalName: null,
  applyDoctorName: null,
  receiveType: null,
  expectHospitalName: null,
  tranStatus: null,
  tranType: null,
  pageNo: 1,
  pageSize: 10
};
export default {
  data() {
    return {
      startDate: "",
      endDate: "",
      // 1:已保存,2已撤销,3:待审核,4:被拒绝,5:待接诊,6:已接诊,7:爽约 8:已到诊,9 已完成
      zhuangtai: [
        {dictName: '已保存', dictValue: 1},
        {dictName: '已撤销', dictValue: 2},
        {dictName: '待审核', dictValue: 3},
        {dictName: '被拒绝', dictValue: 4},
        {dictName: '待接诊', dictValue: 5},
        {dictName: '已接诊', dictValue: 6},
        {dictName: '爽约', dictValue: 7},
        {dictName: '已到诊', dictValue: 8},
        {dictName: '已完成', dictValue: 9}
      ],
      columns: [
        { type: "index", title: "排序", width: 60, align: "center" },
        {
          title: "申请编号",
          key: "applyCode",
          align: "center"
        },
        {
          title: "转诊方向",
          key: "tranType",
          align: "center",
          render: (h, params) => {
            let status = params.row.tranType;
            return status === 0 ? '上转' : '下转';
          }
        },
        {
          title: "转诊类型",
          key: "tranStatus",
          align: "center",
          render: (h, params) => {
            let status = params.row.receiveType;
            return status === 0 ? '门诊' : '住院';
          }
        },
        {
          title: "患者姓名",
          key: "memberName",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phoneNumber",
          align: "center"
        },
        {
          title: "申请医生",
          key: "applyDoctorName",
          align: "center",
          width: 120
        },
        {
          title: "申请机构",
          key: "applyHospitalName",
          align: "center",
          width: 120
        },
        {
          title: "申请日期",
          key: "createTime",
          align: "center",
          width: 120
        },
        {
          title: "转诊医院",
          key: "tranHospitalName",
          align: "center",
          width: 120
        },
        {
          title: "转诊科室",
          key: "tranDeptName",
          align: "center",
          width: 120
        },
        {
          title: "状态",
          key: "tranStatus",
          align: "center",
          width: 120,
          render: (h, params) => {
            let status = params.row.tranStatus;
            switch (status) {
              case 1:
                return '已保存';
              case 2:
                return '已撤销';
              case 3:
                return '待审核';
              case 4:
                return '被拒绝';
              case 5:
                return '待接诊';
              case 6:
                return '已接诊';
              case 7:
                return '爽约';
              case 8:
                return '已到诊';
              case 9:
                return '已完成';
            }
          }
        },
        {
          title: "操作",
          key: "operate",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.handleDetail(params);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      orderList: [],
      count: 0,
      filterObj: this.deepClone(filterObj)
    };
  },
  components: {
    DatePicker
  },
  created() {
    // 上来就加载第一页数据
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/ordersmanagement/index",
        title: "订单管理中心"
      },
      {
        path: "/index/operation/orders/consultingorder/list",
        title: "双向转诊订单"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.prescriptionSearchPages()
  },
  methods: {
    loadsrach() {
      // 查询
      this.filterObj.pageNo = 1;
      this.prescriptionSearchPages()
    },
    loadnodePage() {
      // 重置
      this.startDate = ''
      this.endDate = ''
      this.filterObj = this.deepClone(filterObj);
      this.prescriptionSearchPages();
    },
    loadPage(index) {
      // 分页
      this.filterObj.pageNo = index;
      this.prescriptionSearchPages()
    },
    changeStart(val) {
      // 开始时间
      this.startDate = val;
    },
    changeEnd(val) {
      // 结束时间
      this.endDate = val;
    },
    // 加载列表数据
    prescriptionSearchPages() {
      const reqData = this.deepClone(this.filterObj);
      reqData.applyTimeStart =  Utils.getNowDateBySpecialFormat(this.startDate);
      reqData.applyTimeEnd =  Utils.getNowDateBySpecialFormat(this.endDate);
      this.$axios.post(api.shenqfindListByRemoteTransferOrder, reqData).then(resp => {
        if (resp.data.success) {
          this.count = resp.data.object.count;
          this.orderList = resp.data.object.list;
        } else {
          this.$Message.info("网络错误，请刷新重试");
        }
      })
    },
    handleDetail(row) {
      // 查看详情
      this.functionJS.queryNavgationTo(this, "/index/operation/orders/tworeferral/detail/");
      sessionStorage.setItem('financialList', JSON.stringify(row.row))
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
      this.prescriptionSearchPages()
    }
  }
};
</script>
<style lang="less" scoped>
  .doctorreviewlist {
    margin-left: 1%;
    padding: 10px;
    width: 98%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
      width: 100px;
    }
    .w-input {
      width: 220px;
    }
    .w-num-input {
      width: 100px;
    }
    .m-table {
      margin: 10px 0;
    }
    .first {
      display: inline-block;
      min-width: 320px;
      text-align: right;
    }
    .second {
      display: inline-block;
      min-width: 150px;
      text-align: left;
    }
    .third {
      display: inline-block;
      min-width: 460px;
      text-align: center;
    }
    .margin-up-down {
      display: inline-block;
      margin: 10px 0;
    }
  }
</style>
